import React, { Component } from "react";
import {
	View,
	StyleSheet,
	Text,
	DatePickerIOS,
	TouchableOpacity,
	Modal
} from "react-native";

export class date extends Component {
	constructor(props) {
		super(props);
		console.log(props);
		this.state = {
			date: new Date(),
			timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
			modalVisible:this.props.visible
		};
		this._onDateChange = this._onDateChange.bind(this);
		this._confirm = this._confirm.bind(this);
		this._cancel = this._cancel.bind(this);
	}
	_onDateChange(date){
		this.setState({date: date});
	}
	_cancel(){
		console.log("---------取消---------");
		this.setState({modalVisible: false});
		console.log(this.state);
	}
	_confirm(){
		var date = this.state.date;
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		month = month < 10 ? "0" + month : month;
		var day = date.getDate();
		day = day < 10 ? "0" + day : day;
		var nowDate = year + "-" + month + "-" + day;
		if(this.props.get){
			this.props.get(nowDate);
		};
		this.setState({modalVisible: false});
	}
	render(){
		return(
			<Modal
				animationType={"slide"}
				transparent={true}
				visible={this.state.modalVisible}
			>
				<View style={styles.container}>
						<View style={styles.bar}>
							<TouchableOpacity style={styles.btn} onPress={this._cancel}>
								<Text style={styles.btn_text}>取消</Text>
							</TouchableOpacity>
							<Text style={styles.bar_title}>{this.props.title}</Text>
							<TouchableOpacity style={styles.btn} onPress={this._confirm}>
								<Text style={styles.btn_text}>确定</Text>
							</TouchableOpacity>
						</View>
						<View style={styles.content}>
							<DatePickerIOS
								date={this.state.date}
								mode="date"
								timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours}
								onDateChange={this._onDateChange}
							 />
						</View>
				</View>
			</Modal>
		)
	}
};
const styles = StyleSheet.create({
	container:{
		width: "100%",
		position: "absolute",
		bottom: 0
	},
	bar: {
		height: 48,
		backgroundColor: "#F2F2F2",
		flexDirection: "row",
		alignItems: "center",
		justifyContent: "space-between"
	},
	btn:{
		width: 60,
		height: 48,
		flexDirection: "row",
		alignItems: "center",
		justifyContent: "center"
	},
	btn_text:{
		fontSize:15,
		color: "#FF5997"
	},
	bar_title: {
		fontSize: 15,
		color:  "#333333"
	},
	content:{
		backgroundColor:"#ffffff"
	}
});
exports.date = date;